<template>
	<view class="entirety">
		<nav-bar title="首页" :showLeftIcon="false"></nav-bar>
		<!-- 搜索/选择时间 -->
		<view class="data-statistics">
			<view class="title">
				<text>数据统计</text>
			</view>
			<view>
				<view>
					<text>{{orderStatistics}}</text>
					<text>新增订单数</text>
				</view>
				<view>
					<text>{{completeTheOrder}}</text>
					<text>已完成订单</text>
				</view>
			</view>
		</view>
		<view class="sort" v-if="roleType === 4">
			<view :class="sortActive===1?'active':''" @click="clickSort(1)">
				<text>商城订单</text>
			</view>
			<view :class="sortActive===4?'active':''" @click="clickSort(4)">
				<text>采购订单</text>
			</view>
		</view>
		<view class="top">
			<view class="top-left">
				<!-- <uni-search-bar
          placeholder="搜商品名称、订单编号"
          bgColor="#EEEEEE"
          @confirm="search"
        /> -->
				<u-search placeholder="搜商品名称、订单编号" v-model="keyword" shape="round" :clearabled="true"
					:showAction="false" @search="search"></u-search>
			</view>
			<view class="top-right">
				<u-datetime-picker :show="show" v-model="value1" mode="date" @confirm="checkDate"
					@cancel="cancel"></u-datetime-picker>
				<view class="btn" @click="show = true">选择时间</view>
				<!-- <you-form
          ref="form"
          :showFormTitle="false"
          :formConfig="selectConfig"
          v-model="selectForm"
          @selectChange="selectChange"
        ></you-form> -->
			</view>
		</view>
		<you-tabs :activeName="tabActive" :tabsList="tabsList" @tabClick="clickTabItem"></you-tabs>
		<you-scroll :loadingHeight="loadingHeight" :mainHeight="scrollHeight" :isAllData="isAllData"
			:isRequestSuccess="isRequestSuccess" @onRefresh="onRefresh" @loadMore="loadMore">
			<template>
				<view v-if="isLoading" class="common-loading">
					<image class="loading-img" :src="baseIconUrl + 'commonIcon/icon_loading.png'" />
					正在加载数据，请稍后......
				</view>
				<view class="common-no-data" v-else-if="!businessOrderList || businessOrderList.length === 0">
					<image class="no-data-img" :src="baseIconUrl + 'commonIcon/icon_no_data.png'" />
					<view class="text">暂无数据</view>
				</view>
				<template v-else>
					<view v-if="sortActive===1">
						<businessOrder-list :businessOrderList="businessOrderList" @goShip="toShip"
							@toDelivered="toDelivered"></businessOrder-list>
					</view>
					<view v-if="sortActive===4" class="order-list">
						<order-list :orderList="businessOrderList" @refund="refund" fatherVal="退单"></order-list>
					</view>
				</template>
			</template>
		</you-scroll>
		<view class="tabBar">
			<view v-for="(item,index) in tabBerList" @click="clickPage(item.pagePath)"
				:style="{width:100 / tabBerList.length +'%'}">
				<image class="bar_img" v-if="tabBerActive===index" :src="item.selectedIconPath"></image>
				<image class="bar_img" :src="item.iconPath" v-else></image>
				<text>{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import businessOrderList from '../components/businessOrderList.vue'
	import OrderList from '../components/orderList'
	import {
		baseImgUrl,
		baseIconUrl
	} from '@/config'
	export default {
		name: "BusinessOrder",
		components: {
			businessOrderList,
			OrderList
		},
		data() {
			return {
				roleType: 3,
				completeTheOrder: 0,
				orderStatistics: 0,
				sortActive: 1,
				tabBerActive: 0,
				tabBerList: [{
						"pagePath": "/subPages/otherPages/businessOrder",
						"iconPath": "/static/images/tabBar/tab_home.png",
						"selectedIconPath": "/static/images/tabBar/tab_home_active.png",
						"text": "首页"
					},
					{
						"pagePath": "/subPages/otherPages/privatelyOwned",
						"iconPath": "/static/images/tabBar/tab_mine.png",
						"selectedIconPath": "/static/images/tabBar/tab_mine_active.png",
						"text": "个人中心"
					}
				],
				baseImgUrl,
				keyword: '',
				baseIconUrl,
				loadingHeight: '',
				scrollHeight: '',
				isAllData: false,
				isRequestSuccess: false,
				isLoading: false,
				pageNum: 1,
				pageSize: 9999,
				total: 0,
				businessOrderList: [],
				tabActive: 0,
				tabsList: [{
						label: "全部",
						name: 0
					},
					{
						label: "待发货",
						name: 1
					},
					// {
					// 	label: "配送中",
					// 	name: 2
					// },
					{
						label: "待收货",
						name: 2
					},
					{
						label: "已完成",
						name: 4
					},
					{
						label: "已退单",
						name: 5
					},
				],
				show: false,
				createTime: '',
				pageNum: 1,
				pageSize: 10,
				value1: Number(new Date()),
				// selectConfig: [
				//   {
				//     type: "select",
				//     label: "选择时间",
				//     key: "time",
				//     options: [
				//     ],
				//   },
				// ],
			};
		},

		async onLoad(options) {
			console.log(options);
			const res = await this.$GET('/fx/user/getInfo')
			this.roleType = res.data.roleType
			this.scrollHeight = this.$store.getters.heightData.mainSearchHeight + 'px'
			this.loadingHeight = this.$store.getters.heightData.mainSearchHeight - 56 + 'px'
			this.pageNum = 1
			this.businessOrderList = []
			this.getBusinessOrderList()

		},
		onShow(options) {
			this.OrderStatistics()
		},
		onReady() {
			// 微信小程序需要用此写法
		},
		methods: {
			async refund(item) {
				console.log(item);
				const data = {
					id: item.outTradeNo || item.id
				}
				console.log(item)
				uni.showModal({
					content: '确定取消订单?',
					success: async (succ) => {
						const res = await this.$PUT('/fx/order/chargebackOrder', data)
						if (res.code == 200) {
							console.log(res.data)
							uni.showToast({
								icon: 'success',
								title: res.message,
								duration: 2000
							})
							setTimeout(() => {
								this.getOrderList({
									orderStatus: 5
								})
							}, 2000)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message,
								duration: 2000
							})
						}
					}
				})
			},
			async OrderStatistics() {
				const res = await this.$GET('/fx/order/orderStatistics')
				console.log(res);
				this.completeTheOrder = res.data.completeTheOrder
				this.orderStatistics = res.data.orderStatistics
				console.log(this.completeTheOrder, this.orderStatistics);
			},
			clickSort(index) {
				this.sortActive = index
				this.getBusinessOrderList()
			},
			clickPage(path) {
				uni.redirectTo({
					url: path
				});
			},
			cancel() {
				this.createTime = ''
				this.show = false
				this.tabActive = 0
				this.pageNum = 1
				this.businessOrderList = []
				this.getBusinessOrderList()
			},
			async checkDate(e) {
				console.log(e)
				let year = new Date(e.value).getFullYear();
				let month = ('0' + (new Date(e.value).getMonth() + 1)).slice(-2); // 月份补零  
				let day = ('0' + new Date(e.value).getDate()).slice(-2); // 日期补零 
				let date = `${year}-${month}-${day}`
				this.createTime = date
				this.show = false
				this.tabActive = 0
				this.pageNum = 1
				this.businessOrderList = []
				this.getBusinessOrderList()
			},
			async viewDetails(item) {

			},
			async toShip(item) {
				const data = {
					id: item.outTradeNo || item.id,
					orderStatus: 2
				}
				const res = await this.$PUT('/fx/order', data)
				console.log(res)
				if (res.code == 200) {
					uni.showToast({
						icon: 'success',
						title: res.msg,
						duration: 2000
					})
					setTimeout(() => {
						this.getBusinessOrderList()
					}, 2000)
				}
			},
			async toDelivered(item) {
				uni.navigateTo({
					url: `/subPages/otherPages/components/deliveryOrder?id=${item.outTradeNo || item.id}`
				});

				// const data = {
				// 	id: item.outTradeNo || item.id,
				// 	orderStatus: 4
				// }
				// const res = await this.$PUT('/fx/order', data)
				// console.log(res)
				// if (res.code == 200) {
				// 	uni.showToast({
				// 		icon: 'success',
				// 		title: res.msg,
				// 		duration: 2000
				// 	})
				// 	setTimeout(() => {
				// 		this.getBusinessOrderList()
				// 	}, 2000)
				// }
			},
			search(value) {
				console.log(value, '输入值')
			},
			async getBusinessOrderList() {
				let data = {
					time: this.createTime,
					searchValue: this.keyword,
					orderStatus: this.tabActive,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					orderType: this.sortActive,
				}
				// const res = await this.$GET('/fx/order/listApp', data)
				const res = await this.$GET('/fx/order/list?userRole=4', data)
				if (res.code == 200) {
					console.log(res)
					this.businessOrderList = res.rows
				}

				this.isRequestSuccess = true
			},
			// 下拉刷新
			onRefresh() {
				this.pageNum = 1
				this.businessOrderList = []
				this.isAllData = false
				this.isRequestSuccess = false
				this.getBusinessOrderList()
			},
			// 上拉加载
			async loadMore() {
				const that = this
				// const data = {
				// 	createTime: this.createTime,
				// 	search: this.keyword,
				// 	orderStatus: this.tabActive,
				// 	pageNum: this.pageNum + 1,
				// 	pageSize: this.pageSize
				// }
				// const res = await that.$GET('/fx/order/listApp', data)
				// const res = await new Promise(async function(resolve, reject) {
				// 	setTimeout(async () => {
				// 		const res2 = await that.$GET('/fx/order/listApp', data)
				// 		resolve(res2)
				// 	}, 1000)
				// })
				// console.log(res)
				// if (res.code == 200) {
				// 	this.pageNum++
				// }
				console.log('触底')

				if (this.businessOrderList.length < this.total) {
					this.pageNum++
					this.isAllData = false
					this.isRequestSuccess = false
					this.getBusinessOrderList()
				} else {
					this.isAllData = true
				}
			},
			//切换tab
			clickTabItem(value) {
				this.tabActive = value;
				this.businessOrderList = []
				this.getBusinessOrderList()
			},
			//搜索
			search(res) {
				this.tabActive = 0
				this.pageNum = 1
				this.businessOrderList = []
				this.getBusinessOrderList()
				// uni.showToast({
				// 	title: "搜索：" + res.value,
				// 	icon: "none",
				// });
			},
			//选择时间change事件
			selectChange() {
				this.show = true
			},
		},
	};
</script>
<style lang="scss" scoped>
	.entirety {
		padding-bottom: 120upx;
	}

	.data-statistics {
		background-color: #fff;
		padding: 20upx;

		>view {
			display: flex;
			border-radius: 10upx;
			background: #e4f3f0;

			>view {
				padding: 20upx 0;
				width: 50%;

				text {
					text-align: center;
					display: block;

					&:nth-of-type(1) {
						font-size: 40upx;
						font-weight: 600;
					}

					&:nth-of-type(2) {
						font-size: 20upx;
						color: #aaa;
					}
				}
			}
		}

		.title {
			font-size: 26upx;
			margin-bottom: 10upx;
			background: #ffffff;
			font-weight: 600;
		}
	}

	.sort {
		background-color: #fff;
		padding: 20upx;
		padding-top: 0;
		display: flex;

		view {
			width: 50%;
			text-align: center;
			font-size: 26upx;
			padding: 10upx 0;
			color: #888888;
		}

		.active {
			position: relative;
			color: #000;

			&::after {
				position: absolute;
				left: calc(50% - 25upx);
				bottom: -6upx;
				width: 50upx;
				height: 6upx;
				border-radius: 8upx;
				background: #0b3f35;
				content: '',

			}
		}
	}

	.top {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		padding-top: 10rpx;

		.btn {
			width: 220rpx;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			border-radius: 34rpx;
			background: #F5F5F5;
			color: #999;
		}
	}

	.tabBar {
		position: fixed;
		bottom: 0;
		z-index: 9999;
		width: 100%;
		height: 120upx;
		background-color: #ffffff;
		display: flex;

		>view {
			text-align: center;

			>image {
				margin: 18upx auto 0;
				width: 55upx;
				height: 55upx;
			}

			text {
				font-size: 20upx;
				display: block;
			}
		}
	}

	.order-list {
		padding: 20rpx 28rpx 10rpx;
		padding-bottom: 280rpx;
	}
</style>